<template>
  <div class="pagecontent">
    <div class="commonheader border">
      <i class="iconback"
         @click="backClick"></i>
      <h3>精准估价</h3>
    </div>
    <div class="btn"
         @click="btnClick"
         v-show="valflag">立即估价</div>
    <div class="infobox">
      <div class="infobar"><em>包款选择</em>{{goodsName||this.$store.state.goodsTitle}}</div>
      <div class="infobar"><em>包内编码</em>{{goodsCode||'--'}}</div>
    </div>
    <div class="selectbox">
      <h3>成色选择(所有选项皆为必选)</h3>
      <div class="muicontent"
           id="muicontent">
        <div class="selcontent cur"
             v-for="(item,index) in newValdata"
             :key="index"
             v-show="index==0">
          <div class="quesbar"
               @click="openChose($event)"><span>{{item.title}}</span><em class="chose">{{choseasw[index]}}</em></div>
          <div class="answer">
            <a :class="{cur:childindex==newValdata[index].showItem}"
               v-for="(childitem,childindex) in item.answer"
               :key="childindex"
               @click="answerClick($event,index,childindex,childitem)">{{childitem.name}}</a>
          </div>
        </div>
      </div>
    </div>
    <!--分值大于40 提示-->
    <div class="warntip"
         v-show="tipflag">
      <i class="icontip"></i>
      <p>包质量太差，不建议收取或者质押</p>
    </div>
  </div>
</template>

<script>
import Bus from '../../../static/js/bus'
import { setTimeout } from 'timers'
export default {
  name: 'preciseValuation',
  data () {
    return {
      tipflag: false,
      choseasw: [],
      aswNumber: [],
      selObj: {},
      valflag: false,
      active: null,
      goodsName: '',
      goodsCode: '',
      newValdata: [],
      pricedata: [],
      answerObj: {
        'itemId': this.$store.state.goodsId
      },
      valuedata: [
        {
          showItem: null,
          title: '是否全新',
          answer: [{
            name: '是',
            valnum: 1
          }, {
            name: '否',
            valnum: 2
          }]
        },
        {
          showItem: null,
          title: '附件是否齐全',
          answer: [{
            name: '是',
            valnum: 1
          }, {
            name: '否',
            valnum: 2
          }]
          // answer: ['无', '防尘袋', '保卡', '盒子', '发票']
        },
        {
          showItem: null,
          title: '正面破损',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '包面破损',
            valnum: 5
          }]
          // answer: ['无', '包面破损']
        },
        {
          showItem: null,
          title: '正面划痕',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '少量轻微',
            valnum: 2
          }, {
            name: '较多轻微',
            valnum: 3
          }, {
            name: '较多明显',
            valnum: 5
          }]
          // answer: ['无', '少量轻微', '较多轻微', '较多明显']
        },
        {
          showItem: null,
          title: '正面污渍',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '少量浅色',
            valnum: 2
          }, {
            name: '小面积明显深色',
            valnum: 3
          }, {
            name: '大面积(>5cm),明显深色',
            valnum: 5
          }]
          // answer: ['无', '少量浅色', '小面积明显深色', '大面积(>5cm),明显深色']
        },
        {
          showItem: null,
          title: '正面染色',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '少量不明显',
            valnum: 2
          }, {
            name: '小面积明显',
            valnum: 3
          }, {
            name: '大面积(>5cm),明显',
            valnum: 5
          }]
          // answer: ['无', '少量不明显', '小面积明显', '大面积(>5cm),明显']
        },
        {
          showItem: null,
          title: 'LV包变色',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '配皮微变色',
            valnum: 2
          }, {
            name: '配皮明显变色',
            valnum: 3
          }]
          // answer: ['无', '配皮微变色', '配皮明显变色']
        },
        {
          showItem: null,
          title: '底部划痕',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '轻微少量',
            valnum: 2
          }, {
            name: '较多明显',
            valnum: 3
          }]
          // answer: ['无', '少量轻微', '较多轻微', '较多明显']
        },
        {
          showItem: null,
          title: '底部污渍',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '少量浅色',
            valnum: 2
          }, {
            name: '小面积明显深色',
            valnum: 3
          }, {
            name: '大面积(>5cm),明显深色',
            valnum: 5
          }]
          // answer: ['无', '少量浅色', '小面积明显深色', '大面积(>5cm),明显深色']
        },
        {
          showItem: null,
          title: '底部染色',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '少量不明显',
            valnum: 2
          }, {
            name: '小面积明显',
            valnum: 3
          }, {
            name: '大面积(>5cm),明显',
            valnum: 5
          }]
          // answer: ['无', '少量不明显', '小面积明显', '大面积(>5cm),明显']
        },
        {
          showItem: null,
          title: '底部磨损',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '四角或底钉磨损轻微',
            valnum: 2
          }, {
            name: '四角或底钉磨损明显',
            valnum: 3
          }]
          // answer: ['无', '四角或底钉磨损轻微', '四角或底钉磨损明显']
        },
        {
          showItem: null,
          title: '把手',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '轻微变形或磨损',
            valnum: 2
          }, {
            name: '明显磨损',
            valnum: 3
          }, {
            name: '边油磨损',
            valnum: 5
          }]
          // answer: ['无', '轻微变形或磨损', '明显磨损', '边油磨损']
        },
        {
          showItem: null,
          title: '肩带',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '轻微变形或磨损',
            valnum: 2
          }, {
            name: '明显磨损',
            valnum: 3
          }, {
            name: '边油磨损',
            valnum: 5
          }]
          // answer: ['无', '轻微变形或磨损', '明显磨损', '边油磨损']
        },
        {
          showItem: null,
          title: '金属件',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '轻微变形或轻微氧化',
            valnum: 2
          }, {
            name: '明显磨损或明显氧化',
            valnum: 3
          }]
          // answer: ['无', '轻微变形或轻微氧化', '明显磨损或明显氧化']
        },
        {
          showItem: null,
          title: '内部污渍',
          answer: [{
            name: '无',
            valnum: 1
          }, {
            name: '不明显',
            valnum: 2
          }, {
            name: '小面积明显',
            valnum: 3
          }, {
            name: '超过1/4面积明显',
            valnum: 5
          }]
          // answer: ['无', '不明显', '小面积明显', '超过1/4面积明显']
        },
        {
          showItem: null,
          title: '香奈儿的编码',
          answer: [{
            name: '完全丢失',
            valnum: 5
          }, {
            name: '正常或轻微模糊',
            valnum: 1
          }]
          // answer: ['完全丢失', '正常或轻微模糊']
        }
      ]
    }
  },
  created () {
    console.log(this.valuedata)
    if (this.newValdata.length === 0) {
      this.newValdata = this.valuedata
    }

    this.goodsName = this.$route.query.sendName
    this.goodsCode = this.$route.query.goodsCode
    console.log(this.$store.state.goodsTitle)
  },
  beforeDestroy () {
    Bus.$emit('sendgoodsCode', this.goodsCode)
    Bus.$emit('precdata', this.pricedata)
  },
  mounted () {
    if (this.$store.state.goodsBrand === 'LV') {
      this.valuedata.splice(15, 1)
    } else if (this.$store.state.goodsBrand === 'Chanel') {
      this.valuedata.splice(6, 1)
    } else {
      this.valuedata.splice(6, 1)
      setTimeout(() => {
        this.valuedata.splice(14, 1)
      })
    }
  },
  methods: {
    btnClick () {
      console.log(this.aswNumber)
      // if (this.aswNumber.length === 13) {
      //   this.aswNumber.splice(1, 0, 0)
      //   this.aswNumber.splice(6, 0, 0)
      //   this.aswNumber.splice(15, 0, 0)
      // } else if (this.aswNumber.length === 14 && this.$store.state.goodsBrand === 'LV') {
      //   this.aswNumber.splice(1, 0, 0)
      //   this.aswNumber.splice(15, 0, 0)
      // } else if (this.aswNumber.length === 14 && this.$store.state.goodsBrand === 'Chanel') {
      //   this.aswNumber.splice(1, 0, 0)
      //   this.aswNumber.splice(6, 0, 0)
      // }
      console.log(this.aswNumber)
      this.$http.post(`${this.baseUrl.findProductInfo}`, this.answerObj).then((res) => {
        console.log(res.data.data)
        if (res.data.data === 'Poor') {
          this.tipflag = true
          setTimeout(() => {
            this.tipflag = false
          }, 2000)
        } else {
          this.pricedata = res.data
          this.$router.push({ path: '/valuationData' })
        }
      })
    },
    backClick () {
      this.$router.go(-1)
    },
    openChose (e) {
      let choseBox = e.currentTarget.nextElementSibling
      choseBox.style.display = 'block'
    },
    answerClick (e, index, childindex, childitem) {
      this.valuedata[index].showItem = childindex // 选中样式切换

      console.log(e.currentTarget.parentElement.previousElementSibling.firstElementChild.innerHTML)
      let questionTitle = e.currentTarget.parentElement.previousElementSibling.firstElementChild.innerHTML // 获取估价标题
      if (questionTitle === '是否全新') {
        this.$set(this.answerObj, 'if_new', childitem.valnum)
      } else if (questionTitle === '附件是否齐全') {
        this.$set(this.answerObj, 'if_complete', childitem.valnum)
      } else if (questionTitle === '正面破损') {
        this.$set(this.answerObj, 'pn_damaged', childitem.valnum)
      } else if (questionTitle === '正面划痕') {
        this.$set(this.answerObj, 'pn_scrach', childitem.valnum)
      } else if (questionTitle === '正面污渍') {
        this.$set(this.answerObj, 'pn_stain', childitem.valnum)
      } else if (questionTitle === '正面染色') {
        this.$set(this.answerObj, 'pn_dye', childitem.valnum)
      } else if (questionTitle === 'LV包变色') {
        this.$set(this.answerObj, 'pn_discolour', childitem.valnum)
      } else if (questionTitle === '底部划痕') {
        this.$set(this.answerObj, 'b_scrach', childitem.valnum)
      } else if (questionTitle === '底部污渍') {
        this.$set(this.answerObj, 'b_stain', childitem.valnum)
      } else if (questionTitle === '底部染色') {
        this.$set(this.answerObj, 'b_dye', childitem.valnum)
      } else if (questionTitle === '底部磨损') {
        this.$set(this.answerObj, 'b_damaged', childitem.valnum)
      } else if (questionTitle === '把手') {
        this.$set(this.answerObj, 'handle', childitem.valnum)
      } else if (questionTitle === '肩带') {
        this.$set(this.answerObj, 'baldric', childitem.valnum)
      } else if (questionTitle === '金属件') {
        this.$set(this.answerObj, 'metal_parts', childitem.valnum)
      } else if (questionTitle === '内部污渍') {
        this.$set(this.answerObj, 'i_stain', childitem.valnum)
      } else if (questionTitle === '香奈儿的编码') {
        this.$set(this.answerObj, 'ch_code', childitem.valnum)
      }
      console.log(childitem.valnum)
      console.log(this.answerObj)

      // 页面出现滚动条
      // console.log(e.clientY) // 鼠标点击的Y位置
      // console.log(screen.height)// 屏幕的高度
      if (screen.height - e.clientY < 200) {
        document.getElementById('muicontent').scrollTop = 150
      }

      let a = e.currentTarget.parentElement // 当前点击元素的父元素answer
      let b = e.currentTarget.parentElement.parentElement.nextElementSibling // 当前点击元素的父元素answer的父级元素的selcontent的下一个相邻元素
      let c = e.currentTarget.text // 获取当前点击元素的文本值
      a.parentElement.classList.remove('cur')

      if (b) { // 如果存在下一个selcontent元素
        setTimeout(function () { // 逐个显示下一个问题
          a.style.display = 'none' // 上一个选项的答案隐藏
          b.style.display = 'block' // 下一个选项显示
        }, 100)

        if (this.choseasw[index] !== '' && (e.currentTarget.parentElement.style.display === 'block')) { // 如果这道选项已经选择过了
          this.choseasw.splice(index, 1, childitem.name) // 替换答案数组里面的中文值
          // this.aswNumber.splice(index, 1, childitem.valnum)// 替换答案数组里面的数字值

          if (this.valflag && this.newValdata.length === 13) { // 修改答案的时候，如果‘立即估价’的按钮已经显示了，那就继续显示
            setTimeout(() => {
              this.valflag = true
            }, 200)
          }
          console.log(this.newValdata)

          if (this.choseasw[0] === '是') { // 如果这道选项已经选择过了并且第一个问题切换到了“是”
            if (this.valflag) { // ‘立即估计’按钮不显示
              setTimeout(() => {
                this.valflag = false
              }, 200)
            }

            this.answerObj = {
              'itemId': this.$store.state.goodsId,
              'if_new': childitem.valnum
            }

            this.choseasw = this.choseasw.slice(0, 1)
            // this.aswNumber = this.aswNumber.slice(0, 1)

            e.currentTarget.parentElement.parentElement.nextElementSibling.lastElementChild.style.display = 'block'
            this.newValdata.splice(1, 0, {
              showItem: null,
              title: '附件是否齐全',
              answer: [{
                name: '是',
                valnum: 1
              }, {
                name: '否',
                valnum: 2
              }]
            })
            this.newValdata = this.newValdata.slice(0, 2)
            console.log(this.newValdata)
          } else {
            this.valflag = false
            this.newValdata = this.valuedata
            if ((e.currentTarget.parentElement.parentElement.nextElementSibling.firstElementChild.firstElementChild.innerHTML === '正面破损' || e.currentTarget.parentElement.parentElement.nextElementSibling.firstElementChild.firstElementChild.innerHTML === '附件是否齐全') && (this.choseasw[1] === undefined || this.choseasw[2] === undefined)) {
              e.currentTarget.parentElement.parentElement.nextElementSibling.lastElementChild.style.display = 'block'
            }
          }
        } else { // 如果这道选项没有选择
          setTimeout(function () {
            a.style.display = 'none' // 上一个选项的答案隐藏
            b.style.display = 'block' // 下一个选项显示
          }, 100)

          this.choseasw.push(c) // 答案数组中添加一个中文值
          // this.aswNumber.push(childitem.valnum)// 答案数组中添加一个数字值
        }

        if (this.choseasw[0] === '是') {
          this.newValdata = this.valuedata.slice(0, 2)

          console.log(this.answerObj)
        } else if (this.choseasw[0] === '否') {
          if (this.valuedata[1].title === '附件是否齐全') {
            this.newValdata.splice(1, 1)
            this.choseasw.splice(1, 1)
            // this.aswNumber.splice(1, 1)
            this.answerObj = {
              'itemId': this.$store.state.goodsId,
              'if_new': childitem.valnum,
              'if_complete': 0
            }
          }
        }
      } else { // 如果不存在下一个选项
        setTimeout(function () {
          a.style.display = 'none'
        }, 100)
        let c = e.currentTarget.text

        if (this.choseasw[index] !== '' && (e.currentTarget.parentElement.style.display === 'block')) {
          this.choseasw.splice(index, 1, childitem.name) // 替换答案数组里面的中文值
          // this.aswNumber.splice(index, 1, childitem.valnum)// 替换答案数组里面的数字值
        } else {
          this.choseasw.push(c)
          // this.aswNumber.push(childitem.valnum)
        }
        console.log(this.choseasw)
        this.valflag = true
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.muicontent
  position absolute
  top 2.85rem
  bottom 1rem
  left 0
  right 0
  overflow-y scroll
.infobox
  padding 0.1rem 0 0.1rem 0.3rem
  position relative
  &:before
    content ''
    width 0.04rem
    height 0.22rem
    background #d21733
    position absolute
    left 0
    top 0.26rem
  .infobar
    font-size 0.3rem
    color #333
    padding 0.11rem 0
    em
      color #999
      display inline-block
      width 1.5rem
.selectbox
  h3
    font-size 0.32rem
    color #666
    line-height 0.7rem
    padding-left 0.3rem
    background #f6f5f5
  .selcontent.cur
    .quesbar
      position relative
      &:before
        content ''
        width 0.04rem
        height 0.22rem
        background #d21733
        position absolute
        left -0.3rem
        top 0.34rem
  .selcontent
    padding 0 0.3rem
    .quesbar
      height 0.9rem
      line-height 0.9rem
      font-size 0.32rem
      color #333
      font-weight bold
      .chose
        float right
        font-weight normal
    .answer
      a
        display inline-block
        font-size 0.26rem
        width 3.3rem
        height 0.72rem
        line-height 0.7rem
        text-align center
        color #333
        background #fafafa
        border-radius 0.02rem
        border 1px solid #fafafa
        box-sizing border-box
        margin-bottom 0.2rem
        &:nth-child(2n)
          margin-left 0.28rem
      .cur
        background #fdfdfd
        color #d21733
        border 1px solid #d21733
.selcontent + .selcontent
  border-top 1px solid #fafafa
.btn
  position fixed
  height 1rem
  line-height 1rem
  left 0
  right 0
  bottom 0
  background #d21733
  font-size 0.32rem
  color #fff
  text-align center
  z-index 10
.warntip
  width 3.12rem
  height 3.12rem
  border-radius 0.1rem
  background rgba(0, 0, 0, 0.7)
  position absolute
  left 50%
  top 50%
  margin -1.56rem 0 0 -1.56rem
  .icontip
    display block
    width 1.2rem
    height 1.14rem
    background url('../../../static/images/brand/state03.png') no-repeat
    background-size 100% 100%
    margin 0.45rem auto 0.4rem auto
  p
    font-size 0.26rem
    line-height 1.5
    padding 0 0.2rem
    color #fff
    text-align left
</style>
